/*
 * @Description: 条目检索的title
 * @Author: Zzt
 * @Date: 2022-09-08 17:09:43
 * @LastEditTime: 2023-03-10 16:47:52
 */
import { Button, Space, Tag } from 'antd';
import { HeartOutlined } from '@ant-design/icons';
import Preview from '@/components/Preview';
import { useEffect, useMemo, useState } from 'react';
import { fetchERecords, fetchRelationById } from '@/api/archives/archives';

import styles from '../styles/PorListTitle.module.scss';
import classNames from 'classnames/bind';
import { fetchReciprocalSignByPage } from '@/api/archives/operate';
import Relation from './dialog/Relation';
const cx = classNames.bind(styles);

const FullTitle = (props: any) => {
  const { dataIndex, info, type } = props;
  console.log('type?', type);

  /* 判断文件级 */
  const { downLevel, level } = info;
  const [baseInfo, setBaseInfo] = useState({});
  const [relationVisible, setRelationVisible] = useState(false);
  const [relationData, setRelationData] = useState({});

  useEffect(() => {
    if (level.level === 1) {
      setBaseInfo({
        atCode: downLevel.atCode,
        atType: downLevel.atType,
        dbName: downLevel.commonParams.dbName,
        level: downLevel.level
      });
    }
  }, []);
  /* 用于判断是否存在数据弹窗 */
  const [list, setList] = useState([]);

  const [fields, setFields] = useState([]);

  // 编辑弹窗数据
  const [editData, setEditData] = useState({});

  const [previewVisible, setPreviewVisible] = useState(false);
  const [listQuery, setListQuery] = useState<any>({
    pageNo: 1,
    pageSize: 10
  });

  useEffect(() => {
    if (listQuery.pageNo === 1) {
      return;
    }
    const param = {
      sourceArchiveTypeId: level.archiveTypeId,
      sourceDbName: downLevel.commonParams.dbName,
      sourceEntryId: dataIndex.id,
      sourceLevel: level.level
    };
    fetchReciprocalSignByPage({ ...listQuery, param }).then((res) => {
      const { data } = res;
      setRelationData(data);
    });
  }, [listQuery]);
  const showPreview = () => {
    if (level.level === 1)
      fetchERecords({
        ...listQuery,
        param: {
          atCode: downLevel.atCode,
          atType: downLevel.atType,
          commonParams: downLevel.commonParams,
          downLevelId: dataIndex.row_id,
          level: downLevel.level
        }
      }).then((res: any) => {
        const { data } = res;
        setFields(data.results.fields);
        setList(data.results.data);
        // console.log('fetchERecords', data);
        setEditData(data.results.data[0]);
        setPreviewVisible(true);
      });
  };

  const showRelation = () => {
    const param = {
      sourceArchiveTypeId: level.archiveTypeId,
      sourceDbName: downLevel.commonParams.dbName,
      sourceEntryId: dataIndex.id,
      sourceLevel: level.level
    };
    fetchReciprocalSignByPage({ ...listQuery, param })
      .then((res) => {
        const { data } = res;
        setRelationData(data);
      })
      .finally(() => setRelationVisible(true));
    console.log('dataIndex', dataIndex, info);
  };
  return (
    <div className={cx('titleOut')}>
      <div className={cx('titleInone')}>
        <Button type="text" onClick={showPreview}>
          <span dangerouslySetInnerHTML={{ __html: dataIndex.title }}></span>
          <span dangerouslySetInnerHTML={{ __html: dataIndex.file_name }}></span>
        </Button>
        {/* 所属层级，暂时屏蔽 */}
        {/* <Popover content={content(dataIndex)} title={null} placement="bottom">
            <Button type="link">
              所属层级
              <CaretDownOutlined />
            </Button>
          </Popover> */}
        <Button icon={<HeartOutlined />} type="link" style={{ float: 'right' }}></Button>
        <Space size={0}>
          {type === 6 && (
            <Tag color="blue" onClick={() => showRelation()}>
              关联
            </Tag>
          )}
        </Space>
      </div>
      {useMemo(
        () => (
          <>
            {list.length > 0 && (
              <Preview
                visible={previewVisible}
                title="pic"
                data={editData}
                list={list}
                onClose={() => {
                  setPreviewVisible(false);
                }}
                upper={dataIndex}
                fields={info.fields}
                baseInfo={baseInfo}
              />
            )}
          </>
        ),
        [previewVisible]
      )}
      {useMemo(
        () => (
          <>
            <Relation
              title={dataIndex.title}
              data={relationData}
              visible={relationVisible}
              onClose={() => setRelationVisible(false)}
              setListQuery={setListQuery}
              listQuery={listQuery}
            />
          </>
        ),
        [relationVisible, relationData]
      )}
    </div>
  );
};
export default FullTitle;
